<template>
    <el-aside width="auto" height="auto">
      <el-menu :collapse="isCollapse" :default-active="onRoutes" background-color="#232323" text-color="#ccc" active-text-color="#ddd" unique-opened router>
        <template v-for="item in items">
          <template v-if="item.subItems">
            <el-submenu :index="item.path">
              <template slot="title">
                <i :class="item.icon"></i>
                <span slot="title">{{item.title}}</span>
              </template>
              <el-menu-item v-for="(subItem, i) in item.subItems" :index="subItem.path" :key="i">
                {{subItem.title}}
              </el-menu-item>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :index="item.path">
              <i :class="item.icon"></i>
              <span slot="title">{{item.title}}</span>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </el-aside>
  </template>
  
  <script>
    import Bus from "./bus";
    export default {
      name: "Sidebar",
      data() {
        return {
          isCollapse: false,
          items: [
            {
              title: '系统首页',
              path: '/index',
              icon: 'el-icon-setting'
            },
            {
              title: '拍卖管理',
              path: '/auctionManage',
              icon: 'el-icon-sell',
              subItems:[
                {
                  title: '委托合同',
                  path: '/entrustmentContract'
                },
                {
                  title: '拍卖会管理',
                  path: '/auctionManage'
                },
                {
                  title: '拍卖公告管理',
                  path: '/noticeManage'
                },
                {
                  title: '标的管理',
                  path: '/objectManage'
                },
                {
                  title: '拍卖会直播管理',
                  path: '/liveManage'
                },
                {
                  title: '拍卖师管理',
                  path: '/auctioneerManage'
                },
              ]
            },
            {
              title: '竞买人管理',
              path: '/bidderManage',
              icon: 'el-icon-user',
              subItems:[
                {
                  title: '竞买人管理',
                  path: '/bidderManage'
                },
                {
                  title: '现场竞买人库',
                  path: '/sceneBidder'
                }
              ]
            },
            {
              title: '招商管理',
              path: '/attractInvestmentManage',
              icon: 'el-icon-suitcase',
              subItems:[
                {
                  title: '征集商品管理',
                  path: '/attractGoodsManage'
                }
              ]
            },
            {
              title: '账号管理中心',
              path: '/accountManage',
              icon: 'el-icon-office-building',
              subItems:[
                {
                  title: '企业管理',
                  path: '/enterpriseManage'
                }
              ]
            },
            {
              title: '财务中心',
              path: '/financeManage',
              icon: 'el-icon-document',
              subItems:[
                {
                  title: '保证金管理',
                  path: '/earnestMoneyManage'
                },
                {
                  title: '手续费管理',
                  path: '/serviceChargeManage'
                },
                {
                  title: '银行卡管理',
                  path: '/bankCardManage'
                },
                {
                  title: '利润分析',
                  path: '/profit'
                }
              ]
            },
            {
              title: '商城管理',
              path: '/mallManage',
              icon: 'el-icon-takeaway-box',
              subItems:[
                {
                  title: '我的招商',
                  path: '/my'
                }
              ]
            },
            {
              title: '系统管理员',
              path: '/systemAdministrator',
              icon: 'el-icon-star-off',
              subItems:[
                {
                  title: '用户管理',
                  path: '/userManage'
                },
                {
                  title: '员工管理',
                  path: '/workerManage'
                },
                {
                  title: '角色管理',
                  path: '/roleManage'
                },
                {
                  title: '企业管理',
                  path: '/enterprisesManage'
                },
                {
                  title: '权限管理',
                  path: '/authorityManage'
                },
                {
                  title: '部门管理',
                  path: '/departmentManage'
                },
                {
                  title: '竞买人账号管理',
                  path: '/bidderAccountManage'
                },
                {
                  title: '轮播图管理',
                  path: '/carouselChartManage'
                },
                {
                  title: '行政区划管理',
                  path: '/administrativeArea'
                },
                {
                  title: '合作机构管理',
                  path: '/cooperationManage'
                },
                {
                  title: '菜单管理',
                  path: '/orderManage'
                },
                {
                  title: '竞拍流程',
                  path: '/auctionProcess'
                },
                {
                  title: '数据字典',
                  path: '/dataDictionary'
                }
              ]
            },
            {
              title: '拍卖师后台',
              path: '/auctioneerBackstage',
              icon: 'el-icon-bell',
              subItems:[
                {
                  title: '拍卖师后台',
                  path: '/auctioneerBackstage'
                },
                {
                  title: '查看拍卖',
                  path: '/notStarted'
                },
              ]
            },
          ]
        }
      },
      computed: {
        onRoutes() {
  
          return this.$route.fullPath;
        }
      },
      created() {
  
        // 通过 event bus进行组件间的通信 来折叠和展开侧边栏
        Bus.$on('collapse', isCollapse => {
  
          this.isCollapse = isCollapse;
        });
      }
    }
  </script>
  
  <style scoped lang="less">
    .el-menu {
      height: 100%;
      border: none;
      &:not(.el-menu--collapse) {
        width: 200px;
      }
    }
    .el-menu-item.is-active {
      border-left: 3px solid #459f75;
      background-color: #171717 !important;
    }
  </style>
  